import React, { Component } from 'react'

export default class App extends Component {
    myref = React.createRef();
    state = {
      list:[1, 2, 3, 5, 6, 7]
    };
  getSnapshotBeforeUpdate(){    //处于render之后，componentDidupdate之前，最后一次获取dom属性
    console.log(this.myref.current.scrollHeight);
    return this.myref.current.scrollHeight;
  }
  componentDidUpdate(oldprops,oldstates,value){    //value是获取到的getSnapshotBeforeUpdate中return出来的值
    console.log(this.myref.current.scrollHeight);
      this.myref.current.scrollTop = this.myref.current.scrollHeight - value
  }
  render() {
    return (
      <div>
          <button onClick={()=>{
              this.setState({
                  list:[...[10,11,12,13,15,16], ...this.state.list]
              })
          }}>click</button>
          <div style={{overflow:'auto', height:'200px', width:'100px'}} ref={this.myref}>
          {this.state.list.map((item)=>
            <div key={item} style={{background:'yellow',height:'100px'}}>
                {item}
            </div>)}
          </div>
      </div>
    )
  }
}
